<template>
  <div class="operation">
    <div class="operation-search">
      <a-form layout="inline">
        <a-form-item label="操作时间">
          <a-range-picker
            format="YYYY-MM-DD HH:mm:ss"
            show-time
            :placeholder="['开始时间', '结束时间']"
            :default-value="defaulttimeList"
            @change="onTime"
            v-model="defaulttimeList"
          >
            <template slot="dateRender" slot-scope="current">
              <div class="ant-calendar-date" :style="getcurrentStyle(current)">
                {{ current.date() }}
              </div>
            </template>
          </a-range-picker>
        </a-form-item>
        <a-form-item label="运行环境">
          <a-select
            :allowClear="true"
            default-value=""
            v-model="searchItem.BrowserType"
            style="width: 200px"
            placeholder="请选择"
          >
            <a-select-option value="WEB"> WEB </a-select-option>
            <a-select-option value="PDA"> PDA </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="功能">
          <a-input v-model="searchItem.Function" style="width: 200px" />
        </a-form-item>
        <a-form-item label="厂区：">
          <a-select
            :allowClear="true"
            :maxTagCount="1"
            class="selectwidth"
            v-model="searchItem.WSTypeName"
            placeholder="请选择"
            @change="handleChangeWSType"
            style="width: 200px"
          >
            <a-select-option
              v-for="item in WSTypeList"
              :key="item.type"
              :value="item.type"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="车间：">
          <a-select
            :allowClear="true"
            class="selectwidth"
            v-model="searchItem.SegmentName"
            placeholder="请选择"
            style="width: 200px"
          >
            <a-select-option
              v-for="item in QSegmentList"
              :key="item.type"
              :value="item.type"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="请求类型">
          <a-select
            :allowClear="true"
            default-value=""
            v-model="searchItem.LogType"
            style="width: 200px"
            placeholder="请选择"
          >
            <a-select-option value="POST"> Post </a-select-option>
            <a-select-option value="GET"> Get </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="结果">
          <a-select
            :allowClear="true"
            default-value=""
            v-model="searchItem.Success"
            style="width: 200px"
            placeholder="请选择"
          >
            <a-select-option value="1"> 成功 </a-select-option>
            <a-select-option value="0"> 失败 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="操作员">
          <a-input v-model="searchItem.UserName" style="width: 200px" />
        </a-form-item>
        <a-form-item label="Url地址">
          <a-input v-model="searchItem.Url" style="width: 200px" />
        </a-form-item>
        <a-form-item label="请求信息">
          <a-input v-model="searchItem.RequestParameter" style="width: 200px" />
        </a-form-item>
        <a-form-item label="响应信息">
          <a-input
            v-model="searchItem.ResponseParameter"
            style="width: 200px"
          />
        </a-form-item>
      </a-form>
    </div>
    <div>
      <a-button class="default-button btn" @click="searchstdoperationList"
        >查询</a-button
      >
    </div>
    <div class="table-box">
      <div class="operation-table">
        <div class="operation-table-box" id="OperationManageID">
          <a-table
            :columns="columns"
            :row-key="(record, index) => record.HistoryID"
            :data-source="procedureData"
            :loading="loading"
            :scroll="{ x: 300, y: procedurescrollY }"
            :pagination="false"
            size="small"
            @expand="onExpand"
          >
            <template slot="RequestParameter" slot-scope="text">
              <a href="javascript:;" @click="handleCellClick(text)">{{
                text
              }}</a>
            </template>
            <template slot="ResponseParameter" slot-scope="text">
              <a href="javascript:;" @click="handleCellClick(text)">{{
                text
              }}</a>
            </template>
            <template slot="ExceptionInfo" slot-scope="text">
              <a href="javascript:;" @click="handleCellClick(text)">{{
                text
              }}</a>
            </template>
            <a-table
              slot="expandedRowRender"
              slot-scope="record"
              :columns="innerColumns"
              :data-source="record.DetailList"
              :pagination="false"
            >
              <template slot="Sql" slot-scope="text">
                <a href="javascript:;" @click="handleCellClick(text)">{{
                  text
                }}</a>
              </template>
              <template slot="EditBeforeData" slot-scope="text">
                <a href="javascript:;" @click="handleCellClick(text)">{{
                  text
                }}</a>
              </template>
              <template slot="EditAfterData" slot-scope="text">
                <a href="javascript:;" @click="handleCellClick(text)">{{
                  text
                }}</a>
              </template>
            </a-table>
          </a-table>
        </div>
        <div class="table-paging">
          <a-pagination
            v-model="searchItem.pageRequestModel.pageIndex"
            show-size-changer
            :default-current="1"
            :pageSizeOptions="pageSizeOptions"
            :total="procedureTotal"
            :pageSize="searchItem.pageRequestModel.pageSize"
            @change="procedureChange"
            @showSizeChange="onShowSizeChange"
          />
        </div>
      </div>
    </div>
    <a-modal
      v-model="textVisible"
      title="详细信息"
      width="800px"
      @ok="textVisible = false"
    >
      <pre style="white-space: pre-wrap; word-wrap: break-word">{{
        showText
      }}</pre>
    </a-modal>
  </div>
</template>

<script>
import { getTableScroll } from "@/common/table-calc";
import { getHistoryList, getHistoryDetailByID } from "@/api/audit-trail/index";
import { GetWorkShopTypesAll } from "@/api/WorkShopType/index";
import { GetSegments } from "@/api/NBCSegment/index";
import GeneralButton from "@/components/be-current-btn.vue";
//配置信息列表
const columns = [
  {
    title: "序号",
    dataIndex: "IndexNo",
    width: 60,
    align: "center",
  },
  {
    title: "运行环境",
    dataIndex: "BrowserType",
    width: 100,

    align: "center",
  },
  {
    title: "功能",
    dataIndex: "Function",
    width: 150,
    align: "center",
  },
  {
    title: "请求类型",
    dataIndex: "LogType",
    width: 150,
    align: "center",
    ellipsis: true,
  },
  {
    title: "请求信息",
    dataIndex: "RequestParameter",
    width: 300,
    align: "center",
    ellipsis: true,
    scopedSlots: { customRender: "RequestParameter" },
  },
  {
    title: "响应信息",
    dataIndex: "ResponseParameter",
    width: 300,
    align: "center",
    ellipsis: true,
    scopedSlots: { customRender: "ResponseParameter" },
  },
  {
    title: "异常信息",
    dataIndex: "ExceptionInfo",
    width: 300,
    align: "center",
    ellipsis: true,
    scopedSlots: { customRender: "ExceptionInfo" },
  },
  {
    title: "Url地址",
    dataIndex: "Url",
    width: 300,
    align: "center",
    ellipsis: true,
  },
  {
    title: "厂区",
    dataIndex: "WSTypeName",
    width: 150,
    align: "center",
  },
  {
    title: "站点",
    dataIndex: "SegmentName",
    width: 150,
    align: "center",
    ellipsis: true,
  },
  {
    title: "操作用户",
    dataIndex: "UserName",
    width: 150,
    align: "center",
  },
  {
    title: "用户地址",
    dataIndex: "UserIP",
    width: 200,
    align: "center",
  },
  {
    title: "操作时间",
    dataIndex: "CreteDtStr",
    width: 200,
    align: "center",
  },
  {
    title: "请求结果",
    dataIndex: "Success",
    width: 100,
    align: "center",
  },
  {
    title: "响应时长(s)",
    dataIndex: "ResponseTime",
    width: 100,
    align: "center",
  },
];
//子表信息列表

export default {
  name: "AuditTrail",
  components: {
    // ProcedureForm,
    GeneralButton,
  },
  data() {
    return {
      expandedRowRender: "expandedRowRender", //是否展开
      procedureInfo: {}, //新增删除配置信息信息
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        StartDt: "",
        EndDt: "",
        UserName: "",
        Url: "",
        Success: "",
        SegmentName: "",
        WSTypeName: "",
        Function: "",
        BrowserType: "",
        ResponseParameter: "",
        LogType: "",
        RequestParameter: "",
      }, //搜索
      innerColumns: [
        {
          title: "执行类型",
          dataIndex: "DiffType",
          width: 200,
          align: "center",
          ellipsis: true,
        },
        {
          title: "执行SQL",
          dataIndex: "Sql",
          width: 200,
          align: "center",
          ellipsis: true,
          scopedSlots: { customRender: "Sql" },
        },
        {
          title: "更改前数据",
          dataIndex: "EditBeforeData",
          width: 200,
          align: "center",
          ellipsis: true,
          scopedSlots: { customRender: "EditBeforeData" },
        },
        {
          title: "更改后数据",
          dataIndex: "EditAfterData",
          width: 200,
          align: "center",
          ellipsis: true,
          scopedSlots: { customRender: "EditAfterData" },
        },

        {
          title: "响应时长(s)",
          dataIndex: "ResponseTime",
          width: 200,
          align: "center",
          ellipsis: true,
        },
      ],
      procedureTotal: 0,
      loading: true, //表格loading
      columns, //配置信息列表表头
      procedurescrollY: 0, //动态计算表格高度
      pageSizeOptions: ["30", "50", "100", "200", "500"],
      procedureShow: false, //添加配置信息
      procedureisEdit: false, //判断是添加还是修改
      procedureData: [], //配置信息列表
      innerData: [], //子表信息
      defaulttimeList: [], //默认时间
      WSTypeList: [],
      QSegmentList: [],
      textVisible: false, //请求信息
      showText: "", //请求信息
    };
  },
  methods: {
    //点击单元格
    // 修改后的handleCellClick方法
    handleCellClick(text) {
      this.textVisible = true;
      try {
        // 尝试解析JSON数据
        const jsonData = JSON.parse(text);
        let formattedText = "";
        // 遍历JSON对象的每个属性
        for (const [key, value] of Object.entries(jsonData)) {
          // 将每个字段单独一行显示
          formattedText += `${key}: ${JSON.stringify(value, null, 2)}\n\n`;
        }
        this.showText = formattedText;
      } catch (e) {
        // 如果不是JSON格式，直接显示原始文本
        this.showText = text;
      }
    },
    //选中厂区
    handleChangeWSType(value) {
      let that = this;
      if (value) {
        that.GetSegmentsAllFun(that.searchItem.WSTypeName, true);
      }
    },
    //获取厂区列表
    async GetWorkShopTypesAllFun() {
      let that = this;
      let res = await GetWorkShopTypesAll(10);
      if (res.Status == 10000) {
        let wtList = [];
        res.Data.map((item) => {
          wtList.push({ type: item.WSName, name: item.WSName });
        });
        that.WSTypeList = wtList;
      } else {
        that.$message.error(res.Message);
      }
    },
    //获取车间列表
    async GetSegmentsAllFun(WSType) {
      let that = this;
      let SegSegmentID = [
        "1735FA0C-33E4-4B25-AAA2-DE084FB7D1E3",
        "5D494A1E-5F24-4036-9350-2E442A19FE87",
        "CCDB0114-7026-4218-A507-5C00E870B0B3",
      ];
      let res = await GetSegments({
        SegSegmentID: SegSegmentID,
        WSTypeName: WSType,
      });
      if (res.Status == 10000) {
        let wtList = [];
        res.Data.map((item) => {
          wtList.push({ type: item.SegmentName, name: item.SegmentName });
        });
        that.QSegmentList = wtList;
      } else {
        that.$message.error(res.Message);
      }
      that.spinning = false;
    },
    //制单日期选择
    onTime(e, e1) {
      let that = this;
      that.searchItem.StartDt = that.dateExt.showDateTime(e[0]);
      that.searchItem.EndDt = that.dateExt.showDateTime(e[1]);
    },
    //结果选择
    handleChange(value) {
      this.searchItem.Success = value;
    },
    //获取配置信息列表
    async getHistoryList() {
      this.loading = true;
      try {
        const res = await getHistoryList(this.searchItem);
        this.procedureData = res.Data.Body;
        this.procedureTotal = res.Data.TotalNum;
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    //获取明细表
    async onExpand(expanded, record) {
      if (expanded) {
        this.loading = true;
        record.DetailList = [];
        record.StartDt = this.searchItem.StartDt;
        record.EndDt = this.searchItem.EndDt;
        try {
          const res = await getHistoryDetailByID(record);
          if (res.Data) {
            record.DetailList = res.Data;
          }
        } catch (error) {
        } finally {
          this.loading = false;
        }
      }
    },
    //查询
    searchstdoperationList() {
      this.searchItem.pageRequestModel.pageIndex = 1;
      this.getHistoryList();
    },
    //点击表格行触发
    handleTableChange() {},

    //切换页数
    procedureChange(page, pageSize) {
      this.searchItem.pageRequestModel.pageIndex = page;
      this.searchItem.pageRequestModel.pageSize = pageSize;
      this.getHistoryList();
    },
    //切换条数
    onShowSizeChange(current, size) {
      this.searchItem.pageRequestModel.pageIndex = current;
      this.searchItem.pageRequestModel.pageSize = size;
      this.getHistoryList();
    },
    //时间选择器的样式填充
    getcurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },
  },
  created() {
    let that = this;
    that.searchItem.StartDt = that.dateExt.getDay(-1);
    that.defaulttimeList[0] = that.searchItem.StartDt;
    that.searchItem.EndDt = that.dateExt.getDay(1);
    that.defaulttimeList[1] = that.searchItem.EndDt;
    that.GetWorkShopTypesAllFun();
    that.getHistoryList();
  },
  updated() {
    this.$nextTick(() => {
      this.procedurescrollY = getTableScroll(60, "OperationManageID");
    });
  },
};
</script>

<style lang="less" scoped>
.operation {
  background-color: #ffffff;
  padding: 0.5rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .operation-search {
    display: flex;
    justify-content: flex-end;
    border-bottom: 2px solid #f0f2f5;
    margin-bottom: 0.9375rem;
  }
}
.table-box {
  min-height: 240px;
  flex: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .operation-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 240px;

    .operation-table-box {
      flex: 2;
    }
  }

  .workunit-table {
    flex: 1;
    border: 1px solid #dddddd;
    border-radius: 0.625rem;
    padding: 0.9375rem;

    .workunit-title {
      margin-bottom: 0.625rem;
    }
  }
}
/deep/.ant-form-item-label {
  display: inline-block;
  overflow: hidden;
  line-height: 39.9999px;
  white-space: nowrap;
  text-align: right;
  width: 100px;
  vertical-align: middle;
}
.btn {
  margin-bottom: 10px;
}
</style>
